<!--  -->
<template>
<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [{
          value: 'shenzhen',
          label: '深圳',
          children: [{
            value: 'baoanqu',
            label: '宝安区',
            children: [{
              value: 'fuyong',
              label: '福永'
            }, {
              value: 'fanshen',
              label: '翻身'
            }, {
              value: 'maanshan',
              label: '马鞍山'
            }, {
              value: 'hourui',
              label: '后瑞'
            }]
          }, {
            value: 'nanshanqu',
            label: '南山区',
            children: [{
              value: 'xilihu',
              label: '西丽湖'
            }, {
              value: 'xinghaigongyuan',
              label: '兴海公园'
            }]
          }]
        }, {
          value: 'wuhan',
          label: '武汉',
          children: [{
            value: 'hongshan',
            label: '洪山区',
            children: [{
              value: 'tiejilu',
              label: ' 铁机路'
            }, {
              value: 'renhelu',
              label: '仁和路'
            }, {
              value: 'yangjiawan',
              label: '杨家湾'
            }, {
              value: 'banqiao',
              label: '板桥'
            }]
          }, {
            value: 'jiangxiaqu',
            label: '江夏区',
            children: [{
              value: 'jiangxia',
              label: '江夏客厅'
            }, {
              value: 'fozu',
              label: '佛祖岭'
            }, {
              value: 'dahualing',
              label: '大花岭'
            }]
          }, {
            value: 'wuchang',
            label: '武昌区',
            children: [{
              value: 'xudong',
              label: ' 徐东'
            }, {
              value: 'huochezhan',
              label: '火车站'
            }, {
              value: 'zhongnanlu',
              label: '中南路'
            }, {
              value: 'qingyuzui',
              label: '青鱼嘴'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>
<style  scoped>
  .demonstration{
    width: 120px;
    height: 60px;
    color: #606266;
    background-color: #ddd;
    border: 1px solid #ccc;
    margin-right: 30px;
  }
</style>